<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>签约网</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/baguetteBox.css" />
    <link rel="stylesheet" type="text/css" href="../css/lawyer.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/baguetteBox.js"></script>
    <script type="text/javascript" src="../script/highlight.min.js"></script>
    <script type="text/javascript" src="../script/lawyer.js"></script>
    <script>
        $(function() {
            window['adaptive'].desinWidth = 750;
            window['adaptive'].baseFont = 28;
            window['adaptive'].maxWidth = 750;
            window['adaptive'].init();
        });
    </script>
    <style type="text/css">
        #imgcon ul{
            display: flex;
            justify-content: start;
            flex-wrap: wrap;
        }
        #imgcon ul li{
            width: 25%;
            height: 1.6rem;
            line-height: 1.6rem;
            text-align: center;
            margin: 0.12rem 0;
            padding: 0 0.1rem;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;

        }
        #imgcon ul li .delete{
            position: absolute;
            right: 0;
            top: -0.2rem;
            width: 0.42rem;
            height: 0.42rem;
            z-index: 9;
            background: url("../image/deleteIcon2.png") center no-repeat;
            background-size: 100% 100%;
        }
        #imgcon img{
            max-width: 100%;
            height: 100%;
            vertical-align: middle;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="secHeader">
        <header class="header">
            <a href="javascript:void(0);" onclick='comeBack()' class="back_btn"><img src="../image/head-fanhui.png" alt=""></a>
            <h2>查看信息</h2>
            <!--<a href="javascript:void (0);" class="search_btn set_btn">设置</a>-->
        </header>
    </div>
    <section class="viewmessage" style="padding-bottom: 1.1rem">
        <ul id="message">
            <!--<li>-->
            <!--<div class="msg-info">-->
            <!--<img src="__IMG__/userimg1.jpg" alt="">-->
            <!--</div>-->
            <!--<div class="info">-->
            <!--<div class="name">写民宿</div>-->
            <!--<p>谢谢您为我献出爱心，大恩大德，永不能忘！谢谢您为我献出爱心，大恩大德，永不能忘!</p>-->
            <!--<div class="datetime">2019-03-05 19:23:20</div>-->
            <!--</div>-->
            <!--</li>-->
            <!--<li>-->
            <!--<div class="msg-info">-->
            <!--<img src="__IMG__/userimg1.jpg" alt="">-->
            <!--</div>-->
            <!--<div class="info">-->
            <!--<div class="name">写民宿</div>-->
            <!--<p>谢谢您为我献出爱心，大恩大德，永不能忘！谢谢您为我献出爱心，大恩大德，永不能忘!</p>-->
            <!--<div class="imgLsit">-->
            <!--<img src="__IMG__/video1.jpg" />-->
            <!--<img src="__IMG__/video1.jpg" />-->
            <!--<img src="__IMG__/video1.jpg" />-->
            <!--</div>-->
            <!--<div class="files_info">-->
            <!--<img src="__IMG__/file_icon.png" />-->
            <!--<div>-->
            <!--<div class="file_name">法律文件</div>-->
            <!--<div class="file_size">4.61M</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="datetime">2019-03-05 19:23:20</div>-->
            <!--</div>-->
            <!--</li>-->
        </ul>
    </section>

    <section class="fixed_btn" style="background: #ffffff;  height:auto!important;">
        <div class="viewmsaage_footed">
            <i class="image_file" onclick="showAction()"></i>
            <input type="hidden" id="icon" name="icon" value="">
            <i class="upload_file" onclick="showFile()"></i>
            <input type="hidden" id="file" name="file" value="">
            <input style="margin: 0 0.1rem;" type="text" name="content" id="content" placeholder="留言" />
            <div class="submit" onclick="tijiao()">发布</div>
        </div>
        <div class="uploadImg">
          <div id="imgcon">
            <ul id="imgconUl">

            </ul>
          </div>
        </div>
    </section>

</body>
<script>
    var ask_id;
    apiready = function() {
        $api.fixStatusBar($api.dom('#secHeader'));
        api.setStatusBarStyle({
            style: 'light'
        });
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.closeWin();
        });
        api.addEventListener({
            name: 'scrolltobottom'
        }, function(ret, err) {
            message();
        });

        ask_id = api.pageParam.id;
        message();
    };

    function message() {
        var p = {
            ask_id: ask_id,
        };
        api.ajax({
            url: webSiteUrl + '/app/staff/twinfoList',
            method: 'post',
            data: {
                values: p
            }
        }, function(ret, err) {
            var mhtml = '';

            console.log(JSON.stringify(ret));
            if (ret.code == 200) {
                var data = ret.data;
                //console.log(data[0].icon[0].path)

                if (data != '' && data != null) {
                    for (var i = 0; i < data.length; i++) {
                        var iconhtml = '';
                        var filehtml = '';
                        var icon = data[i].icon;
                        var file = data[i].file;
                        if (icon != '' && icon != null) {
                            for (var j = 0; j < icon.length; j++) {
                                iconhtml +='<a href="'+webSiteUrl+icon[j].path+'"><img src="'+webSiteUrl+icon[j].path+'" /></a>';
                            }
                        }
                        if (file != '' && file != null) {
                            for (var z = 0; z < file.length; z++) {
                                filehtml += '<div class="files_info""><a style="display:flex; width: 100%:" href="' + webSiteUrl + file[z].path + '"><img src="../image/file_icon.png" /><div><div class="file_name">' + file[z].name +
                                    '</div><div class="file_size">' + file[z].size + '</div></div></a></div>';
                            }
                        }
                        mhtml += '<li><div class="msg-info"><img src="' + webSiteUrl + data[i].user_icon + '" alt=""></div><div class="info"><div class="name">' + data[i].phone + '</div><p>' + data[i].content + '</p><div class="imgLsit baguetteBoxOne gallery">' +
                            iconhtml + ' </div>' + filehtml + '<div class="datetime">' + data[i].create_time + '</div></div></li>';
                    }
                }
                $('#message').html(mhtml);

                baguetteBox.run('.baguetteBoxOne');

            } else {
                alert(ret.msg)
            }

        });
    }

    function tijiao() {
        var icon_id = $("input[name=icon]").val();
        var file_id = $("input[name=file]").val();
        var content = $("input[name=content]").val();

        if (icon_id == '' && file_id == '' && content == '') {
            api.toast({
                msg: "请上传图片或者文件或者输入文字",
                location: 'bottom'
            });
            return;
        }

        var p = {
            token: token,
            ask_id: ask_id,
            icon: icon_id,
            file: file_id,
            content: content
        };
        api.ajax({
            url: webSiteUrl + '/app/staff/twinfoAdd',
            method: 'post',
            data: {
                values: p
            }
        }, function(ret, err) {
            if (ret.code == 200) {
                api.showProgress({
                    title: ret.msg,
                    modal: true
                });
                api.hideProgress();

                location.reload();

            } else {
                alert(ret.msg)
            }

        });
    }

    function showFile() {
        var len = $('#imgcon').children().length;
        /*if(len==3){
            alert("最多上传3张图片");return;
        }*/
        api.actionSheet({
            title: '请选择上传方式',
            cancelTitle: '取消',
            buttons: ['文件管理器']
        }, function(ret, err) {
            if (ret) {
                gerFile();
            }
        });
    }

    function gerFile() {
        var fileBrowser = api.require('fileBrowser');

        fileBrowser.open(function(ret) {
            if (ret) {
                //fileBrowser.skin({skin:1,});//设置文件浏览器皮肤 0 原始皮肤; 1 白色皮肤; 2 灰色皮肤
                fileBrowser.close(); //点击文件关闭文件浏览器
                var fileData = ret.url;
                //$("#message").html((JSON.stringify(fileData)))
                api.ajax({
                    url: webSiteUrl + '/app/public/upload_file',
                    method: 'post',
                    data: {
                        files: {
                            'file': fileData,
                        }
                    }
                }, function(result, err) {
                    console.log(JSON.stringify(result))
                    //alert(JSON.stringify(ret));
                    if (result.code == 200) {
                        //alert(1)
                        //alert(JSON.stringify(ret));
                        api.hideProgress();
                        addpfile(result.video_id);
                        //alert(JSON.stringify(result.video_id));
                    } else {
                        api.hideProgress();
                        api.toast({
                            msg: '上传失败！',
                            location: 'middle'
                        });
                    }

                });
            }
        });
    }

    function addpfile(id) {
        var ids = $("#file").val();
        if (ids != '') {
            ids += ',' + id;
        } else {
            ids = id;
        }
        console.log(ids)
        $("#file").val(ids);
    }

    function showAction() {
        var len = $('#imgcon').children().length;
        /*if(len==3){
            alert("最多上传3张图片");return;
        }*/
        api.actionSheet({
            title: '上传图片',
            cancelTitle: '取消',
            buttons: ['拍照', '从手机相册选择']
        }, function(ret, err) {
            if (ret) {
                getPicture(ret.buttonIndex);
            }
        });
    }

    function getPicture(sourceType) {
        if (sourceType == 1) { // 拍照
            //获取一张图片
            api.getPicture({
                sourceType: 'camera',
                encodingType: 'png',
                mediaValue: 'pic',
                allowEdit: false,
                quality: 90,
                saveToPhotoAlbum: true
            }, function(ret, err) {
                if (ret.data == '') {
                    return;
                }
                if (ret) {

                    var imgSrc = ret.data;
                    if (imgSrc != "") {

                        //$api.attr(ele, 'src', imgSrc);
                    }
                    if (ret.hasOwnProperty("list")) {

                        //var localAvaterPath = ret.data;
                        //$api.attr(ele, 'src', ret.list[0].path);
                        api.showProgress({
                            title: '正在上传...',
                            modal: true
                        });
                    }
                    var ele = $api.dom('#icon');
                    api.ajax({
                        url: webSiteUrl + '/app/public/uploads',
                        method: 'post',
                        data: {
                            files: {
                                'file': ret.data,
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.code == 200) {
                                //alert(JSON.stringify(ret));
                                api.hideProgress();
                                addpic(ret.id);
                                console.log(JSON.stringify(ret.id));
                            } else {
                                api.hideProgress();
                                api.toast({
                                    msg: ret.msg,
                                    location: 'middle'
                                });
                            }
                        } else {
                            api.hideProgress();
                            api.toast({
                                msg: err.msg,
                                location: 'middle'
                            });
                        }
                    });




                }
            });
        } else if (sourceType == 2) { // 从相机中选择
            //UIMediaScanner 是一个多媒体扫描器，可扫描系统的图片、视频等多媒体资源
            var obj = api.require('UIMediaScanner');
            obj.open({
                //返回的资源种类,picture（图片）,video（视频）,all（图片和视频）
                type: 'picture',
                //（可选项）图片显示的列数，须大于1
                column: 4,
                max: 1,
                //（可选项）图片排序方式,asc（旧->新）,desc（新->旧）
                sort: {
                    key: 'time',
                    order: 'desc'
                },
                //（可选项）模块各部分的文字内容
                texts: {
                    stateText: '已选择*项',
                    cancelText: '取消',
                    finishText: '完成'
                },
                styles: {
                    bg: '#fff',
                    mark: {
                        icon: '',
                        position: 'bottom_right',
                        size: 20
                    },
                    nav: {
                        bg: '#eee',
                        stateColor: '#000',
                        stateSize: 18,
                        cancleBg: 'rgba(0,0,0,0)',
                        cancelColor: '#000',
                        cancelSize: 18,
                        finishBg: 'rgba(0,0,0,0)',
                        finishColor: '#000',
                        finishSize: 18
                    }
                }
            }, function(ret) {
                if (ret.eventType == 'cancel') {
                    return;
                }
                if (ret) {
                    if (ret.hasOwnProperty("list")) {

                        //var localAvaterPath = ret.list[0].path;
                        //$api.attr(ele, 'src', ret.list[0].path);
                        api.showProgress({
                            title: '正在上传...',
                            modal: true
                        });
                    }
                    var ele = $api.dom('#icon');
                    api.ajax({
                        url: webSiteUrl + '/app/public/uploads',
                        method: 'post',
                        data: {
                            files: {
                                'file': ret.list[0].path,
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.code == 200) {
                                api.hideProgress();
                                //alert(JSON.stringify(ret));


                                addpic(ret.id, ret.pic);

                            } else {
                                api.hideProgress();
                                api.toast({
                                    msg: ret.msg,
                                    location: 'middle'
                                });
                            }
                        } else {
                            api.hideProgress();
                            api.toast({
                                msg: err.msg,
                                location: 'middle'
                            });
                        }
                    });
                }
            });
        }
    }

    function addpic(id,imgpath){
        var imgpath = imgpath;
        var ids=$("#icon").val();
        if(ids != ''){
            ids+=','+id;
        }else{
            ids=id;
        }
        var a='<li data-id="'+id+'"><img src="'+webSiteUrl+imgpath+'" alt=""> <span class="delete"></span></li>';

        $("#imgconUl").append(a);
        $("#icon").val(ids);
    }

    $('.uploadImg').on('click','#imgcon ul li .delete',function () {
      var index = $(this).index();
      $(this).parents('li').remove();//移出被点击的li
      var id = $(this).parents('li').attr('data-id');//获取需要删除的id
      var ids = $("#icon").val();//获取input框的值
      var arr = ids.toString().split(',');//将获取input框的值转化为字符串，以','分割成数组
      arr.splice($.inArray(id,arr),1);//用$.inArray()遍历数组,找到需要删除的id的位置，并用splice将其删除
      $("#icon").val(arr);
   });
</script>

</html>
